<template>
	<view id='container' class="container">

		<view class="partnerTitle">
			<view class="vipTotal">
				<span class='item'>推荐会员：<span>{{total}}人</span></span>
				<span class='item'>拼友：<span>{{memberCount}}人</span></span>
				<span class='item'>今日拼团：<span>{{todayCount}}人</span></span>
			</view>
			<!-- <view class="helpWrap">
				<image src="../../../static/img/help.png" mode=""></image>
			</view> -->
		</view>
		<view class="list">
			<view class='item' v-for='(item,index) in list' :key='index'>
				<view class="left">
					<view class='imgBox'>
						<image :src="item.avatar" alt="">
					</view>
					<view class="info">
						<h4 v-text='item.name' :title='item.name' ></h4>
						<p>拼团总次数：{{item.groupCount}}次</p>
					</view>

				</view>
				<view class="right">
					<h4 class='gray'>加入时间：{{item.createTime}}</h4>
					<h4 class='gray'>最后拼团时间：{{item.lastGroupTime}}</h4>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import API from '@/common/api';
	import utils from '@/common/utils';
	import uniPopup from '@/pages/components/uni-popup/uni-popup.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		data() {
			return {
				total: 0,
				todayCount: 0,
				memberCount: 0,
				totalPartner: '',
				params: {
					inviteUserId: uni.getStorageSync('uid'),
					// inviteUserId: "8071978019599814656",
					limit: 10,
					page: 0,
				},
				loading: false,
				finished: false,
				loadMoreText: '加载中...',
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				showLoadMore: false,
				list: [],
			}
		},
		onLoad() {
			this.getUserList()
			this.appUserState()
		},
		components: {
			uniLoadMore
		},
		onPullDownRefresh() {
			this.params.page = 0;
			this.getUserList();
			this.finished = false;
		},
		onUnload() {
			// this.contentList = [];
			this.showLoadMore = false;
		},
		onReachBottom() {
			console.log(this.finished, 'onReachBottom  finished');
			if (!this.finished) {
				this.showLoadMore = true;
				setTimeout(() => {
					this.params.page++;
					this.getUserList();
				}, 300);
			}
		},
		methods: {
			appUserState() {
				API.appUserState({
					targetId: uni.getStorageSync('uid')
				}).then(res => {
					if (res.code == 200) {
						this.todayCount = res.data.groupCount
						this.memberCount = res.data.memberCount
					}
				})
			},
			async getUserList() {
				uni.showLoading({
					title: '正在加载...'
				});
				this.loading = true;
				API.userList(this.params).then(res => {
					if (res.code == 200) {
						let json = res;
						uni.hideLoading();
						if (0 == this.params.page) {
							this.list = []
						}
						for (let i = 0; i < json.data.length; i++) {
							this.list.push({
								avatar: json.data[i].avatar,
								name: json.data[i].name,
								groupCount: json.data[i].groupCount,
								createTime: utils.timestampToFormatString(json.data[i].createTime),
								lastGroupTime: json.data[i].lastGroupTime > 0 ? utils
									.timestampToFormatString(json.data[i].lastGroupTime) : '未参与',
							});
						}

						uni.stopPullDownRefresh();
						// 加载状态结束
						this.loading = false;
						if (json.data.length < this.params.limit) {
							this.finished = true;
							this.showLoadMore = false;
						}
						console.log(json, '111111')
						this.total = json.total
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.container {
		background: white;

		.partnerTitle {

			padding: 1rem;
			border-bottom: 1px solid #ececec;
			display: flex;
			justify-content: space-between;

			.vipTotal {
				display: flex;
				justify-content: space-between;
				width: 100%;

				span {
					span {
						color: #0597f4;
						margin: 0;
					}
				}
			}

			.helpWrap {
				width: 20%;
				display: flex;
				justify-content: flex-end;

				image {
					width: 24px;
					height: 24px;
				}
			}
		}

		.list {
			.item {
				display: flex;
				justify-content: space-between;
				/*padding: 1rem 1rem .2rem 1rem;*/
				padding: 1rem;
				border-bottom: 1px solid rgba(236, 236, 236, 1);

				.left {
					width: 45%;
					display: flex;
					.imgBox {
						width: 40px;
						height: 40px;
						margin-right: 10px;
						image {
							width: 40px;
							height: 40px;
							border-radius: 50%;
						}
					}

					.info {
						width: 100%;
						flex: 1;
						h4 {
							width: 94%;
							font-weight: 400;
							font-size: 15px;
							color: #000;
							margin: 0;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						p {
							color: rgba(113, 112, 112, 1);
							font-size: 12px;
							margin-top: .4rem;
						}
					}
				}


				.right {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					width: 55%;

					.gray {
						color: rgba(117, 117, 117, 1);
						font-size: 12px;
						text-align: right;
					}
				}
			}
		}
	}
</style>
